﻿<template>
    <div>
        <div class="layout-main">
            <el-row style="margin-bottom:12px">
                <el-button v-on:click="add()" size="small" type="primary">添加</el-button>
               <el-button v-on:click="add()" size="small" type="success">同步企业微信</el-button>
                <el-button v-on:click="getList()" style="float:right" size="small" type="primary">刷新</el-button>
            </el-row>
            <el-tree :props="options" :data="sysBranchs" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <div style="float:right;">
                        <el-button type="text" size="mini" @click="() => addSub(data)" >
                            添加子部门
                        </el-button>
                        <el-button type="text" size="mini" @click="() => modify(data)">
                            修改
                        </el-button>
                        <el-button v-if="data.id!=1" type="text" size="mini" @click="() => doDelete(data)">
                            删除
                        </el-button>
                    </div>
                </div>
            </el-tree>
        </div>
        <CSysDepartmentDialog ref="sysBranchDialog" @cancel="getList()" @ok="getList()" />
    </div>
</template>
<script>
import CSysDepartmentDialog from "./CSysDepartmentDialog.vue"
export default {
    name: 'SysBranch',
    components: {
        CSysDepartmentDialog
    },
    data() {
        return {
            options: {
                label: "name",
                children: "children"
            },
            loading: false,



            sysBranch: {

            },

            sysBranchs: [

            ],
            rules: {}
        };
    },
    mounted: function() {
        this.getList();

    },
    methods: {
        getList: function() {
            var me = this;
            var params = {};

            me.loading = true;
            me.$http.post("/sys/sysdepartment/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.sysBranchs = body.obj;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        doDelete: function(row) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/sysdepartment/doDelete.action", { id: row.id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.$errorMessage(body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        modify: function(row) {
            this.sysBranch = row;
            this.$refs['sysBranchDialog'].showDialog(row.id,null);
        },
        addSub: function(row) {
            this.sysBranch = {};
            this.$refs['sysBranchDialog'].showDialog(null,row.id);
        },
        add:function(){
                this.sysBranch = {};
            this.$refs['sysBranchDialog'].showDialog(null,null);
        }
       
    }
}
</script>
<style >

 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>